<template>
    <div class="Box">
        <div class="box1">
            <div class="box1_1">
                <div class="pageimg">
                    <el-image style="width: 130px; height: 130px" :src="url" :fit="fit" />
                </div>
                <h2>magpie</h2>
                <br>
                <span>超级管理员</span>
            </div>
            <hr>
            <div>
                <p>登录时间：{{ GetDate() }}</p>
                <br>
                <button @click="ck1">退出登录</button>
            </div>
        </div>
        <div class="box2">
            <div class="box2_1">
                <div class="box_1_1">
                    <el-icon><InfoFilled /></el-icon>
                </div>
                <div class="box_1_2">
                    <span>￥1234</span>
                    <br>
                    <span>今日支付订单</span>
                </div>
            </div>
            <div class="box2_1">
                <div class="box_1_1">
                    <el-icon><CircleCheckFilled /></el-icon>
                </div>
                <div class="box_1_2">
                    <span>￥1800</span>
                    <br>
                    <span>今日未支付订单</span>
                </div>
            </div>
            <div class="box2_1">
                <div class="box_1_1">
                    <el-icon><QuestionFilled /></el-icon>
                </div>
                <div class="box_1_2">
                    <span>￥230</span>
                    <br>
                    <span>本月收藏订单</span>
                </div>
            </div>
            <div class="box2_1">
                <div class="box_1_1">
                    <el-icon><QuestionFilled /></el-icon>
                </div>
                <div class="box_1_2">
                    <span>￥230</span>
                    <br>
                    <span>今日收藏订单</span>
                </div>
            </div>
            <div class="box2_1">
                <div class="box_1_1">
                    <el-icon><CircleCheckFilled /></el-icon>
                </div>
                <div class="box_1_2">
                    <span>￥1234</span>
                    <br>
                    <span>本月支付订单</span>
                </div>
            </div>
            <div class="box2_1">
                <div class="box_1_1">
                    <el-icon><InfoFilled /></el-icon>
                </div>
                <div class="box_1_2">
                    <span>￥1800</span>
                    <br>
                    <span>本月未支付订单</span>
                </div>
            </div>

        </div>
        <div class="fontdata">
            <el-card style="margin-top: 20px; height: 460px">
                <el-table :data="tableData">
                    <el-table-column v-for="(val, key) in tableLabel" :key="key" :prop="key" :label="val">
                    </el-table-column>
                </el-table>
            </el-card>
        </div>
        <div class="twofontdata">
            <el-card style="height: 240px">
                <div style="height: 210px" ref="chartDom"></div>
            </el-card>
        </div>
        <div class="graph">
            <el-card style="height: 230px" class="cart1">
                <div style="height: 220px" ref="userEcharts"></div>
            </el-card>
            <el-card style="height: 230px" class="cart2">
                <div style="height: 230px" ref="videoEcharts"></div>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ref, onMounted } from "vue"
import * as echarts from 'echarts'
let router = useRouter();
function ck1() {
    localStorage.removeItem('用户名')
    localStorage.removeItem('密码')
    router.push({
        path: '/Login'
    })
}
// 头像的获取
const url =
    'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'

// 时间
function GetDate() {
    //获取现在的时间
    var date = new Date();
    let y = date.getFullYear();//获取现在的年份
    let m = date.getMonth();//获取现在的月份
    let dates = date.getDate();//获取现在的号数
    let arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    let d = date.getDay();//算出星期几
    let h = date.getHours();//算出小时
    let min = date.getMinutes();//算出分钟
    const LatesTime = y + '年' + (m + 1) + '月' + dates + '日' + h + '时' + min + '分' + arr[d];
    return LatesTime
}

// 折线图
const chartDom = ref()
const option = {
    // title: {
    //     text: 'Stacked Line'
    // },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: 'Video Ads',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: 'Direct',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: 'Search Engine',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};
onMounted(() => {
    const E = echarts.init(chartDom.value)
    E.setOption(option)
})
// 树状图
const userEcharts = ref()
const option1 = {
    legend: {},
    tooltip: {},
    dataset: {
        source: [
            ['product', '2015', '2016', '2017'],
            ['Matcha Latte', 43.3, 85.8, 93.7],
            ['Milk Tea', 83.1, 73.4, 55.1],
            ['Cheese Cocoa', 86.4, 65.2, 82.5],
            ['Walnut Brownie', 72.4, 53.9, 39.1]
        ]
    },
    xAxis: { type: 'category' },
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};
onMounted(() => {
    const U = echarts.init(userEcharts.value)
    U.setOption(option1)
})
// 扇形图
const videoEcharts = ref()
const option2 = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }
            ]
        }
    ]
};
onMounted(() => {
    const v = echarts.init(videoEcharts.value)
    v.setOption(option2)
})

const tableData = ref([{
    name: 'oppo',
    todayBuy: 100,
    monthBuy: 300,
    totalBuy: 800
},
{
    name: 'vivo',
    todayBuy: 100,
    monthBuy: 300,
    totalBuy: 800
},
{
    name: '苹果',
    todayBuy: 100,
    monthBuy: 300,
    totalBuy: 800
},
{
    name: '小米',
    todayBuy: 100,
    monthBuy: 300,
    totalBuy: 800
},
{
    name: '三星',
    todayBuy: 100,
    monthBuy: 300,
    totalBuy: 800
},
{
    name: '魅族',
    todayBuy: 100,
    monthBuy: 300,
    totalBuy: 800
}]
)
const tableLabel = ref({
    name: '课程',
    todayBuy: '今日购买',
    monthBuy: '本月购买',
    totalBuy: '总购买'
})
</script>

<style lang="less" scoped>
.Box{
    width: 80vw;
    height: 100vh;
    margin: auto;
}
.fontdata {
    width: 350px;
    margin-left: 15px;
}

.graph {
    width: 610px;
    height: 230px;
    margin-left: 410px;
    margin-top: 20px;
    display: flex;
}

.cart1 {
    width: 320px;
}

.cart2 {
    width: 340px;
}

.twofontdata {
    width: 610px;
    margin-left: 410px;
    margin-top: -460px;
}

.pageimg {
    .el-image {
        margin-left: -170px;
        margin-top: 25px;
        border-radius: 50%;
    }
}

.box1_1 {
    width: 350px;
    height: 180px;

    h2 {
        margin-top: -100px;
        margin-left: 120px;
    }

    span {
        font-size: 20px;
        margin-left: 120px;
    }
}

.box1_1>img {
    // margin-left: -200px;
    // margin-top: 30px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
}

.box1 {
    background-color: rgba(255, 255, 255, 0.34);
    border-radius: 10px;
    width: 350px;
    height: 260px;
    margin-left: 15px;
    margin-top: 20px;
    outline: 1px solid white;

}

.box2 {
    margin-left: 415px;
    margin-top: -270px;
    width: 600px;
    height: 270px;
    // outline: 1px solid red;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    // align-content: stretch;

    .box2_1 {
        width: 240px;
        height: 80px;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0.34);
        outline: 1px solid white;

        .box_1_1 {
            width: 80px;
            height: 80px;
            border-radius: 10px;
            background-color: rgba(53, 222, 222, 0.708);

            i {
                margin-top: 25px;
                font-size: 30px;
            }
        }

        .box_1_2 {
            margin-top: -65px;
            margin-left: 60px;
        }
    }
}
</style>